
import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState } from 'react';
import { TableOutlined, DeleteOutlined, ShareAltOutlined, SettingOutlined, ReloadOutlined, InfoCircleOutlined, NodeIndexOutlined, ApartmentOutlined, PartitionOutlined, ProfileOutlined } from '@ant-design/icons';
import { confirm } from '@tauri-apps/plugin-dialog';
import { Spin, Drawer } from 'antd';

import { InstalledApplicationGrid } from './components';
import { applicationGetIntalledApplications, uninstallApplication } from '../../services';
import { IconsHeader } from '../../components';
import { InstalledApplicationDetail } from './components';

import DESKTOP_IMG from '../../assets/desktop.png';
import { truncate } from '@tauri-apps/plugin-fs';
import { InstalledApplication } from '@/services/local';

export interface ApplicationLaunchpadPageProps {
    style?: CSSProperties;
    version?: number;
}

export const ApplicationLaunchpadPage: React.FC<ApplicationLaunchpadPageProps> = (props: any) => {

    const [data, setData] = useState<Array<InstalledApplication>>([]);

    const [selected, setSelected] = useState<InstalledApplication | null>(null);

    const [action, setAction] = useState<string>('');

    const [detailOpen, setDetailOpen] = useState<boolean>(false);

    const [loading, setLoading] = useState<boolean>(false);

    const refresh = async () => {
        //获取应用
        setLoading(true);
        applicationGetIntalledApplications().then((apps) => {
            setData(apps);
            setLoading(false);
        }).catch((err) => {
            console.log(err);
            setLoading(false);
        });
    };

    //应用列表
    useEffect(() => {
        refresh();
    }, [props.version]);

    if (loading) {
        return (
            <Container style={props.style}>
                <Spin tip="加载中" size="large">
                    <div style={{ width: '100px' }}></div>
                </Spin>
            </Container>
        );
    }
    return (
        <Container style={props.style}>
            <Header>
                <IconsHeader
                    activeKey={action}
                    itemSize={30}
                    leftItems={[
                        {
                            key: '信息',
                            label: '信息',
                            icon: <InfoCircleOutlined />,
                            disabled: selected === null,
                            isAction: true,
                        },
                        {
                            key: '删除',
                            label: '删除',
                            icon: <DeleteOutlined />,
                            disabled: selected === null,
                            isAction: true,
                        }
                    ]}
                    rightItems={[
                        {
                            key: '刷新',
                            label: '刷新',
                            icon: <ReloadOutlined />,
                            isAction: true,
                        },
                        {
                            key: '设置',
                            label: '设置',
                            icon: <SettingOutlined />,
                            isAction: true,
                            disabled: true,
                        }
                    ]}
                    onChange={async (key: string, isAction?: boolean) => {
                        if (isAction) {
                            //删除
                            if (key === '删除' && selected) {
                                //
                                const confirmed2 = await confirm('确定要删除该应用吗？', { title: '删除应用', kind: 'warning' });
                                if (confirmed2) {
                                    await uninstallApplication(selected.identifier);
                                    //
                                    await refresh();
                                }
                            } else if (key === '刷新') {
                                //
                                await refresh();
                            } else if (key === '信息') {
                                //
                                setDetailOpen(true);
                            }
                        } else {
                            setAction(key);
                        }
                    }}></IconsHeader>
            </Header>
            {/* <Background src={DESKTOP_IMG}></Background> */}
            <Content data-self={true} onClick={async (event) => {
                if (event.target) {
                    let target: any = event.target;
                    if (target.dataset && target.dataset.self === 'true') {
                        setSelected(null);
                    }
                }
            }}>
                <InstalledApplicationGrid
                    style={{
                        zIndex: 2,
                    }} items={data}
                    layout={'vertical'}
                    activeKey={selected ? selected.identifier : null}
                    onChange={async (item) => {
                        setSelected(item);
                    }}
                ></InstalledApplicationGrid>
            </Content>
            <Drawer
                title="应用详情"
                onClose={() => {
                    setDetailOpen(false);
                }}
                width={'50%'}
                destroyOnClose={true}
                open={detailOpen}>
                <InstalledApplicationDetail item={selected}></InstalledApplicationDetail>
            </Drawer>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
`;

const Content = styled.div`
    flex:1;
    width: 100%;
    display: flex;
    overflow: auto;
    background-color: #FFFFFF;
`;
const Header = styled.div`
    height: 38px;
    width: 100%;
    background-color: #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
    display: flex;
`;
const Background = styled.img`
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
`;